<template>
  <div class="ur-card" >
    <card-header :title="'亮灯率'" :hasBackground="true"></card-header>
    <div class="ur-card-body pl-0" :class="{active:statisticIndex==6}">
      <div class="position-relative w-100" >
<!--        <title-mark class="ml-3" :title="'亮灯率'"></title-mark>-->
        <div class="mr-3  position-absolute" style="right:0;z-index: 2">
            <el-button @click="query('year',2)" size="mini" :class="{active:lightRateType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
            <el-button @click="query('month',1)" size="mini" :class="{active:lightRateType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
            <el-button @click="query('day',0)" size="mini" :class="{active:lightRateType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart4" class="w-100 mt-3" :style="{'height':height+'px'}" ref="echarts4" element-loading-customClass="myChart4"
             v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'
  import chart from 'api/chart'
  import cardHeader from "base/card-header"
  import titleMark from "base/titleMark"
  import fetch from 'api/fetch'

  export default {
    components: {cardHeader,titleMark},
    props: {
      height:0,
      statisticIndex:{
        type:Number,
        default:6
      },
      isRefresh:false,
    },
    data() {
      return {
        loading:false,
        lightRateChart: null,
        lightRateType:'day',
        typeIndex:0
      }
    },
    watch: {
      statisticIndex:{
        handler(newValue, oldValue) {
          this.statisticIndex = newValue
        },
        deep: true
      },
      lightRateType(type){
        this.lightRate(type)
      },
      isRefresh:{
        handler(newValue, oldValue) {
          this.isRefresh = newValue
          if(newValue){
            this.setTimer()
          }else{
            this.$store.commit('timer/clearLightRateTimer')
          }
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        lightRateTimer: state => state.timer.lightRateTimer,
      })
    },
    methods: {
      query(type){
        this.typeIndex++
        if (this.typeIndex == 3) this.typeIndex = 0
        this.lightRateType = type
        this.$store.commit('timer/clearLightRateTimer')
      },
      setTimer() {
        let _this=this
        let types=['day','month','year']
        this.$store.commit('timer/setLightRateTimer', setInterval(() => {
          _this.typeIndex++
          if (_this.typeIndex == 3) _this.typeIndex = 0
          _this.lightRateType = types[_this.typeIndex]
        }, 60000))
      },
      async lightRate(type){//亮灯率
        this.lightRateType = type
        this.loading=true
        if (this.lightRateChart) {
          this.lightRateChart.dispose()
        }
        this.lightRateChart = chart.barChart('myChart4')
        let res = await api.fetchSimple('/OverView/TotalLightingPercent', {type: type})
        let data = res
        if (data) {
          this.loading=false
          let xData = [], yData = []
          for (let i = 0; i < data.length; i++) {
            xData.push(fetch.getDate(type, data[i].Date))
            //济南市章丘 造数据
            if(['2020-08-01 00:00:00','2020-08-08 00:00:00','2020-08-09 00:00:00'].includes(data[i].Date)){
              yData.push(100)
            }else{
              yData.push(data[i].Value)
            }
          }
          let formatter = '时间：{b0}<br/>亮灯率：{c0}%'
          let shadowColor = ['rgba(244,205,119,0.5)', 'rgba(244,205,119,0)']
          chart.setLineOptionChart(this.lightRateChart, formatter, xData, yData, '亮灯率', '#E69F1F', shadowColor)
          if(!this.lightRateTimer&&this.isRefresh){
            this.setTimer()
          }
        }
      },
    },
    created() {
      this.setTimer()
    },
    mounted() {
      this.lightRate('day')
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
